import React, { Component } from 'react';
import { WhiteSpace } from 'antd-mobile';
import { withRouter } from 'react-router-dom';
import UserCard from '../../components/User/UserCard/UserCard';
import UserFunction from '../../components/User/UserFunction/UserFunction';

import './User.less';

class User extends Component {

    constructor(props) {
        super(props);
        this.fetchData();
        this.state = {
            realStatus: '',
            cardInfo: {
                avatarUrl: '',
                realName: '',
                personNumber: '',
                countMoney: '',
                yesterdayEarnings: '',
                moonMoney: ''
            }
        }
    }

    fetchData = () => {
        React.$utils.request({
            url: '/app/detaileInformation'
        }).then(({ realStatus, ...cardInfo }) => {
            this.setState({
                realStatus,
                cardInfo
            })
        })
    }

    render() {
        return (
            <div style={{
                backgroundImage: `url(${require('../../images/myself_bg.png')})`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'contain',
                paddingTop: '1.96rem',
                position: 'relative'
            }}>
                <img className='setting-icon' src={require('../../images/myself_icon9.png')} alt="" onClick={() => { this.props.history.push('/setting') }} />
                <UserCard info={this.state.cardInfo} />
                <WhiteSpace />
                <UserFunction switchTab={this.props.switchTab} isAuthentication={this.state.realStatus} />
            </div>
        );
    }
}

export default withRouter(User)
